<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <!-- Tell the browser to be responsive to screen width -->
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
    <!-- daterange picker -->
    <link rel="stylesheet" href="plugins/daterangepicker/daterangepicker.css">
    <!-- bootstrap datepicker -->
    <link rel="stylesheet" href="plugins/datepicker/datepicker3.css">
    <!-- iCheck for checkboxes and radio inputs -->
    <link rel="stylesheet" href="plugins/iCheck/all.css">
    <!-- Bootstrap time Picker -->
    <link rel="stylesheet" href="plugins/timepicker/bootstrap-timepicker.min.css">
    <!-- Select2 -->
    <link rel="stylesheet" href="plugins/select2/select2.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="dist/css/AdminLTE.min.css">
    <!-- AdminLTE Skins. We have chosen the skin-blue for this starter
          page. However, you can choose any other skin. Make sure you
          apply the skin class to the body tag so the changes take effect.
    -->
    <link rel="stylesheet" href="dist/css/skins/skin-blue.min.css">
    <link rel="stylesheet" href="css/style.css">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body class="skin-blue sidebar-mini" style="height: auto;">
    <div class="wrapper" style="height: auto;">
        <!-- 顶部导航栏 -->
        <header class="main-header">
            <!-- Logo -->
            <a href="index.html" class="logo">
                <!-- mini logo for sidebar mini 50x50 pixels -->
                <span class="logo-mini"><b>智途</b></span>
                <!-- logo for regular state and mobile devices -->
                <span class="logo-lg"><b>智途</b>科技</span>
            </a>
            <!-- Header Navbar: style can be found in header.less -->
            <nav class="navbar navbar-static-top" role="navigation">
                <!-- Sidebar toggle button-->
                <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
                    <span class="sr-only">切换导航</span>
                </a>
                <!-- Navbar Right Menu -->
                <div class="navbar-custom-menu">
                    <ul class="nav navbar-nav">
                        <!-- Messages: style can be found in dropdown.less-->
                        <li class="messages-menu">
                            <a href="pages/project/my-approval.html" class="dropdown-toggle">
                                    我要审批
                                    <i class="fa fa-envelope-o"></i>
                                    <span class="label label-success">4</span>
                                </a>
                        </li>
                        <!-- User Account: style can be found in dropdown.less -->
                        <li class="dropdown user user-menu">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                <img src="dist/img/user2-160x160.jpg" class="user-image" alt="User Image">
                                <span class="hidden-xs">智途</span>
                            </a>
                            <ul class="dropdown-menu">
                                <!-- User image -->
                                <li class="user-header">
                                    <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
                                    <p>智途</p>
                                    <small>一枚快乐的搬砖小能手</small>
                                </li>
                                <!-- Menu Body -->
                                <!-- Menu Footer-->
                                <li class="user-footer">
                                    <div class="pull-left">
                                        <a href="#" class="btn btn-default btn-flat">修改</a>
                                    </div>
                                    <div class="pull-right">
                                        <a href="#" class="btn btn-default btn-flat">退出</a>
                                    </div>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="#" data-toggle="control-sidebar">信息公告
                                    <i class="fa fa-bell-o"></i>
                                    <span class="label label-warning"><font><font>10</font></font></span>
                                </a>
                        </li>
                    </ul>
                </div>
            </nav>
        </header>
        <!-- 左侧菜单栏 -->
        <aside class="main-sidebar">
            <!-- sidebar: style can be found in sidebar.less -->
            <section class="sidebar">
                <!-- Sidebar user panel -->
                <div class="user-panel">
                    <div class="pull-left image">
                        <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
                    </div>
                    <div class="pull-left info">
                        <p>智途</p>
                        <a href="#"><i class="fa fa-circle text-success"></i> 在线</a>
                    </div>
                </div>
                <!-- sidebar menu: : style can be found in sidebar.less -->
                <ul class="sidebar-menu">
                    <li class="header">ERP管理系统</li>
                    <li class="treeview ">
                        <a href="#">
                            <i class="fa fa-dashboard"></i>
                            <span>项目管理</span>
                            <span class="pull-right-container">
                                    <i class="fa fa-angle-left pull-right"></i>
                                </span>
                        </a>
                        <ul class="treeview-menu">
                            <li><a href="pages/project/my-project.html"><i class="fa fa-circle-o"></i> 我的项目</a></li>
                            <li><a href="pages/project/my-approval.html"><i class="fa fa-circle-o"></i> 我的审批</a></li>
                        </ul>
                    </li>
                    <li class="treeview">
                        <a href="#">
                            <i class="fa fa-files-o"></i>
                            <span>费用报销</span>
                            <span class="pull-right-container">
                                    <i class="fa fa-angle-left pull-right"></i>
                                </span>
                        </a>
                        <ul class="treeview-menu">
                            <li><a href="pages/funds/my-reimburse.html"><i class="fa fa-circle-o"></i>我的报销</a></li>
                            <li><a href="pages/funds/my-borrow-money.html"><i class="fa fa-circle-o"></i> 我的借款</a></li>
                        </ul>
                    </li>
                    <li class="treeview">
                        <a href="#">
                            <i class="fa fa-th"></i>
                            <span>工时填报</span>
                            <span class="pull-right-container">
                                    <i class="fa fa-angle-left pull-right"></i>
                                </span>
                        </a>
                        <ul class="treeview-menu">
                            <li><a href="pages/time/time1.html"><i class="fa fa-circle-o"></i>我的工时</a></li>
                        </ul>
                    </li>
                    <li class="treeview">
                        <a href="#">
                            <i class="fa fa-bar-chart"></i>
                            <span>统计分析</span>
                            <span class="pull-right-container">
                                    <i class="fa fa-angle-left pull-right"></i>
                                </span>
                        </a>
                        <ul class="treeview-menu">
                            <li><a href="pages/statistics/statistics.html"><i class="fa fa-circle-o"></i> 统计报表</a></li>
                        </ul>
                    </li>
                    <li class="treeview">
                        <a href="#">
                            <i class="fa fa-pie-chart"></i>
                            <span>合同管理</span>
                            <span class="pull-right-container">
                                    <i class="fa fa-angle-left pull-right"></i>
                                </span>
                        </a>
                        <ul class="treeview-menu">
                            <li><a href="pages/contract/contract.html"><i class="fa fa-circle-o"></i> 我的合同</a></li>
                        </ul>
                    </li>
                    <li class="treeview">
                        <a href="#">
                            <i class="fa fa-laptop"></i>
                            <span>系统管理</span>
                            <span class="pull-right-container">
                                    <i class="fa fa-angle-left pull-right"></i>
                                </span>
                        </a>
                        <ul class="treeview-menu">
                            <li><a href="pages/system/organization.html"><i class="fa fa-circle-o"></i> 组织机构</a></li>
                            <li><a href="pages/system/post-role.html"><i class="fa fa-circle-o"></i> 岗位角色</a></li>
                            <li>
                                <a href="pages/system/user-control.html">
                                    <i class="fa fa-circle-o"></i>
                                    <span>用户管理</span>
                                </a>
                            </li>
                            <li><a href="pages/system/authority-management.html"><i class="fa fa-circle-o"></i> 权限管理</a></li>
                        </ul>
                    </li>
                </ul>
            </section>
            <!-- /.sidebar -->
        </aside>
        <!-- 中间内容 -->
        <div class="content-wrapper">
            <section class="content-header">
                <span class="head_text">更改密码</span>
            </section>
            <section class="content">
                <form class="">
                    <div class="form-group">
                        <label for="username" class="control-label col-md-2 col-xs-2">登录账号：</label>
                        <div class="col-md-3 col-xs-4">
                            <input type="text" class="form-control" id="username" autofocus required pattern="" placeholder="">
                        </div>
                        <div id="usernameTip" class="col-md-3 col-xs-4 hide" style="text-align: left;">
                            <a href="" class="fa"></a>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="passwordOld" class="control-label col-md-2 col-xs-2">原登录密码：</label>
                        <div class="col-md-3 col-xs-4">
                            <input type="password" id="passwordOld" class="form-control" autofocus required pattern="">
                        </div>
                        <div id="passwordTipOld" class="col-md-3 col-xs-4 hide" style="text-align: left;">
                            <a href="" class="fa"></a>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="passwordNew" class="control-label col-md-2 col-xs-2">新登录密码：</label>
                        <div class="col-md-3 col-xs-4">
                            <input type="password" id="passwordNew" class="form-control" autofocus required pattern="^[a-zA-Z0-9]{8,}$">
                        </div>
                        <div id="passwordTipNew" class="col-md-3 col-xs-6 show control-error" style="text-align: left;">
                            <a href="" class="fa"></a>
                            *不少于8位，仅由数字和英文字母构成，且字母需分大小写
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="passwordNew2" class="control-label col-md-2 col-xs-2">再次输入登录密码：</label>
                        <div class="col-md-3 col-xs-4">
                            <input type="password" id="passwordNew2" class="form-control" autofocus required pattern="^[a-zA-Z0-9]{8,}$">
                        </div>
                        <div id="passwordTipNew2" class="col-md-3 col-xs-4 hide" style="text-align: left;">
                            <a href="" class="fa"></a>
                        </div>
                    </div>
                </form>
                <div class="row">
                    <div class="col-md-3 col-md-offset-2 col-xs-4 col-xs-offset-2">
                        <button class="btn btn-info btn-block">提交</button>
                    </div>
                </div>
            </section>
        </div>
        <!-- 底部标注 -->
        <footer class="main-footer">
            <div class="pull-right hidden-xs">
                <b><font><font>版本</font></font></b>
                <font>
                    <font> 1.0.0
                    </font>
                </font>
            </div>
            <strong><font><font>版权所有©2017 </font></font><a href=""><font><font>江苏智途科技</font></font></a><font><font>。</font></font></strong>
            <font>
                <font>版权所有。
                </font>
            </font>
        </footer>
        <aside class="control-sidebar control-sidebar-dark">
            <!-- Tab panes -->
            <div class="tab-content">
                <!-- Settings tab content -->
                <div class="tab-pane active">
                    <form method="post">
                        <div style="overflow: hidden;margin: 20px 0;">
                            <span class="control-sidebar-heading">信息公告</span>
                            <button class="btn btn-default btn-xs pull-right">已读</button>
                        </div>
                        <div class="form-group">
                            <label class="control-sidebar-subheading">
                                    研发部开发xxxx
                                    <input type="checkbox" class="pull-right" checked="">
                                </label>
                            <p>
                                昨日下午，研发部门完成xxxxx项目
                            </p>
                        </div>
                        <!-- /.form-group -->
                    </form>
                </div>
                <!-- /.tab-pane -->
            </div>
        </aside>
        <div class="control-sidebar-bg" style="position: fixed; height: auto;"></div>
    </div>
</body>
<!-- jQuery 2.2.3 -->
<script src="plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="bootstrap/js/bootstrap.min.js"></script>
<!-- Select2 -->
<script src="plugins/select2/select2.full.min.js"></script>
<!-- InputMask -->
<script src="plugins/input-mask/jquery.inputmask.js"></script>
<script src="plugins/input-mask/jquery.inputmask.date.extensions.js"></script>
<script src="plugins/input-mask/jquery.inputmask.extensions.js"></script>
<!-- bootstrap datepicker -->
<script src="plugins/datepicker/bootstrap-datepicker.js"></script>
<!-- bootstrap time picker -->
<script src="plugins/timepicker/bootstrap-timepicker.min.js"></script>
<!-- FastClick -->
<script src="plugins/fastclick/fastclick.js"></script>
<!-- SlimScroll 1.3.0 -->
<script src="plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- iCheck 1.0.1 -->
<script src="plugins/iCheck/icheck.min.js"></script>
<!--layer弹出框-->
<script src="plugins/layer/layer.js"></script>
<!-- AdminLTE App -->
<script src="dist/js/app.min.js"></script>
<script src="dist/js/demo.js"></script>
<script src="js/popup.js"></script>
<script>
    var username = document.getElementById('username');
    var usernameTip = document.getElementById('usernameTip');
    var usernameTipA = usernameTip.firstElementChild;
    username.onblur = function() {
        if (username.validity.valid) {
            usernameTip.className = 'col-md-3 show';
            usernameTipA.className = 'fa fa-check control-success';
            usernameTip.lastChild.nodeValue = '';
        } else if (username.validity.valueMissing) {
            usernameTip.className = 'col-md-3 show control-error';
            usernameTipA.className = 'fa fa-times control-error';
            usernameTip.lastChild.nodeValue = '登录账号不能为空';
        } else if (username.validity.patternMismatch) {
            usernameTip.className = 'col-md-3 show control-error';
            usernameTipA.className = 'fa fa-times control-error';
            usernameTip.lastChild.nodeValue = '请正确填写您的账号';
        }
    }
    var passwordOld = document.getElementById('passwordOld');
    var passwordTipOld = document.getElementById('passwordTipOld');
    var passwordTipOldA = passwordTipOld.firstElementChild;
    passwordOld.onblur = function() {
        if (passwordOld.validity.valid) {
            passwordTipOld.className = 'col-md-3 show';
            passwordTipOldA.className = 'fa fa-check control-success';
            passwordTipOld.lastChild.nodeValue = '';
        } else if (passwordOld.validity.valueMissing) {
            passwordTipOld.className = 'col-md-3 show control-error';
            passwordTipOldA.className = 'fa fa-times control-error';
            passwordTipOld.lastChild.nodeValue = '原密码不能为空';
        } else if (passwordOld.validity.patternMismatch) {
            passwordTipOld.className = 'col-md-3 show control-error';
            passwordTipOldA.className = 'fa fa-times control-error';
            passwordTipOld.lastChild.nodeValue = '请输入正确密码';
        }
    }
    var passwordNew = document.getElementById('passwordNew');
    var passwordTipNew = document.getElementById('passwordTipNew');
    var passwordTipNewA = passwordTipNew.firstElementChild;
    passwordNew.onblur = function() {
        if (passwordNew.validity.valid) {
            passwordTipNew.className = 'col-md-3 show';
            passwordTipNewA.className = 'fa fa-check control-success';
            passwordTipNew.lastChild.nodeValue = '';
        } else if (passwordNew.validity.valueMissing) {
            passwordTipNew.className = 'col-md-3 show control-error';
            passwordTipNewA.className = 'fa fa-times control-error';
            passwordTipNew.lastChild.nodeValue = '请输入新的密码';
        } else if (passwordNew.validity.patternMismatch) {
            passwordTipNew.className = 'col-md-3 show control-error';
            passwordTipNewA.className = 'fa fa-times control-error';
            passwordTipNew.lastChild.nodeValue = '新密码格式不正确';
        }
    }
    var passwordNew2 = document.getElementById('passwordNew2');
    var passwordTipNew2 = document.getElementById('passwordTipNew2');
    var passwordTipNewA2 = passwordTipNew2.firstElementChild;
    passwordNew2.onblur = function() {
        if (passwordNew2.value === passwordNew.value) {
            passwordTipNew2.className = 'col-md-3 show';
            passwordTipNewA2.className = 'fa fa-check control-success';
            passwordTipNew2.lastChild.nodeValue = '';
        } else if (passwordNew2.value !== passwordNew.value) {
            passwordTipNew2.className = 'col-md-3 show control-error';
            passwordTipNewA2.className = 'fa fa-times control-error';
            passwordTipNew2.lastChild.nodeValue = '两次输入的密码不一致';
        } else if (passwordNew2.validity.patternMismatch) {
            passwordTipNew2.className = 'col-md-3 show control-error';
            passwordTipNewA2.className = 'fa fa-times control-error';
            passwordTipNew2.lastChild.nodeValue = '新密码格式不正确';
        }
    }
</script>

</html>